<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章管理 - 学生知识系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .status-draft {
            background-color: #ffc107;
            color: #000;
        }
        .status-published {
            background-color: #198754;
            color: #fff;
        }
        .status-archived {
            background-color: #6c757d;
            color: #fff;
        }
        .article-card {
            transition: transform 0.2s;
        }
        .article-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-graduation-cap me-2"></i>
                学生知识系统
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="/articles">返回文章列表</a>
                <a class="nav-link" href="/logout">退出登录</a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2><i class="fas fa-cogs me-2"></i>文章管理</h2>
                    <div>
                        <span class="badge bg-info me-2">总计: <span th:text="${totalElements}">0</span> 篇文章</span>
                    </div>
                </div>

                <!-- 错误信息 -->
                <div th:if="${error}" class="alert alert-danger" role="alert">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <span th:text="${error}"></span>
                </div>

                <!-- 调试信息 -->
                <div class="alert alert-info" th:if="${articles != null}">
                    <strong>调试信息：</strong>
                    <p>文章总数: <span th:text="${totalElements}">0</span></p>
                    <p>当前页文章数: <span th:text="${articles.content.size()}">0</span></p>
                    <div th:if="${!articles.content.empty}">
                        <p>第一篇文章信息：</p>
                        <ul>
                            <li>ID: <span th:text="${articles.content[0].id}">N/A</span></li>
                            <li>标题: <span th:text="${articles.content[0].title}">N/A</span></li>
                            <li>状态: <span th:text="${articles.content[0].status}">N/A</span></li>
                            <li>作者: <span th:text="${articles.content[0].author?.nickname}">N/A</span></li>
                        </ul>
                    </div>
                </div>

                <!-- 文章列表 -->
                <div class="row" th:if="${articles != null and !articles.content.empty}">
                    <div class="col-md-6 col-lg-4 mb-4" th:each="article : ${articles.content}">
                        <div class="card article-card h-100">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <span class="badge" 
                                      th:classappend="${article.status != null and article.status.name() == 'DRAFT'} ? 'status-draft' : 
                                                     (${article.status != null and article.status.name() == 'PUBLISHED'} ? 'status-published' : 'status-archived')"
                                      th:text="${article.status != null ? (article.status.name() == 'DRAFT' ? '草稿' : 
                                              (article.status.name() == 'PUBLISHED' ? '已发布' : '已归档')) : '未知状态'}">状态</span>
                                <small class="text-muted" th:text="${article.author?.nickname}">作者</small>
                            </div>
                            <div class="card-body">
                                <h6 class="card-title" th:text="${article.title}">文章标题</h6>
                                <p class="card-text text-muted small" th:text="${#strings.abbreviate(article.summary, 80)}">文章摘要</p>
                                <div class="row text-center small text-muted">
                                    <div class="col-4">
                                        <i class="fas fa-eye"></i>
                                        <span th:text="${article.viewCount}">0</span>
                                    </div>
                                    <div class="col-4">
                                        <i class="fas fa-heart"></i>
                                        <span th:text="${article.likeCount}">0</span>
                                    </div>
                                    <div class="col-4">
                                        <i class="fas fa-comment"></i>
                                        <span th:text="${article.commentCount}">0</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        <span th:if="${article.status.name() == 'PUBLISHED' and article.publishedAt != null}">
                                            发布: <span th:text="${#temporals.format(article.publishedAt, 'MM-dd HH:mm')}"></span>
                                        </span>
                                        <span th:if="${article.status.name() != 'PUBLISHED'}">
                                            创建: <span th:text="${#temporals.format(article.createdAt, 'MM-dd HH:mm')}"></span>
                                        </span>
                                    </small>
                                    <div>
                                        <a th:href="@{'/articles/' + ${article.id}}" class="btn btn-sm btn-outline-primary" 
                                           th:if="${article.status.name() == 'PUBLISHED'}">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a th:href="@{'/articles/' + ${article.id} + '/edit'}" class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 空状态 -->
                <div th:if="${articles == null or articles.content == null or articles.content.empty}" class="text-center py-5">
                    <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                    <h4 class="text-muted">暂无文章</h4>
                    <p class="text-muted">系统中还没有任何文章</p>
                </div>

                <!-- 分页 -->
                <nav th:if="${totalPages > 1}" aria-label="文章分页">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${currentPage == 0} ? 'disabled'">
                            <a class="page-link" th:href="@{/admin/articles(page=${currentPage - 1})}" aria-label="上一页">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        
                        <li th:each="i : ${#numbers.sequence(0, totalPages - 1)}" 
                            class="page-item" 
                            th:classappend="${i == currentPage} ? 'active'">
                            <a class="page-link" th:href="@{/admin/articles(page=${i})}" th:text="${i + 1}">1</a>
                        </li>
                        
                        <li class="page-item" th:classappend="${currentPage == totalPages - 1} ? 'disabled'">
                            <a class="page-link" th:href="@{/admin/articles(page=${currentPage + 1})}" aria-label="下一页">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>

                <!-- 统计信息 -->
                <div class="row mt-4" th:if="${articles != null and !articles.content.empty}">
                    <div class="col-md-3 col-6 mb-3">
                        <div class="card text-center">
                            <div class="card-body">
                                <h5 class="card-title text-warning">草稿</h5>
                                <h3 class="card-text" th:text="${articles.content.stream().filter(a -> a.status != null && a.status.name() == 'DRAFT').count()}">0</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-3">
                        <div class="card text-center">
                            <div class="card-body">
                                <h5 class="card-title text-success">已发布</h5>
                                <h3 class="card-text" th:text="${articles.content.stream().filter(a -> a.status != null && a.status.name() == 'PUBLISHED').count()}">0</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-3">
                        <div class="card text-center">
                            <div class="card-body">
                                <h5 class="card-title text-secondary">已归档</h5>
                                <h3 class="card-text" th:text="${articles.content.stream().filter(a -> a.status != null && a.status.name() == 'ARCHIVED').count()}">0</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-3">
                        <div class="card text-center">
                            <div class="card-body">
                                <h5 class="card-title text-info">总计</h5>
                                <h3 class="card-text" th:text="${totalElements}">0</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>